<template>
    <div class="info-box">

        <div v-for="(item, index) in datass" :key="item.id">
            <div class="top-box">
                <div :style="{ backgroundColor: item.bgc }">{{ item.text }}</div>
                <div style="margin-left: 5px;">{{ item.type }}·{{ item.describe }}</div>
            </div>
            <div class="bottom-box">
                <div>
                    <EnvironmentOutlined />&nbsp;&nbsp;{{ item.pos }}
                </div>
                <div style="font-size: 8px;">{{ item.time }}</div>
            </div>
        </div>

    </div>
</template>
<script setup>
import { ref, computed, onBeforeMount } from "vue";
import './info.scss'
import emitter from '@/utils/eventBus';
import db from "@/data/db.js";
const props = defineProps(["state", "type", "pos"])
onBeforeMount(() => {
// 初始化数据
    init();
})
const init = () => {
    db.forEach(item => {
        item.text = obj[item.level];
        item.bgc = bgcs[item.level];
    });
}


const obj = {
    1: "一级",
    2: "二级",
    3: "三级",
}

const bgcs = {
    1: "red",
    2: "orange",
    3: "skyblue",
}

const pos = ref("");
emitter.on("changePos", (val) => {
    pos.value = val;
})

const state = ref("pending");
emitter.on("changeState", (val) => {
    state.value = val;
})
let datass = computed(() => {
    const temps = db.filter(item => {
        return (item.state == props.state) && (props.type === "全部类型" ? true : item.type == props.type) && (props.pos === "" ? true : item.pos.includes(props.pos));
    });
    return temps;
})

const type = ref("全部");
emitter.on("changeType", (val) => {
    type.value = val;
})


</script>
  